<template>
  <div class='tinymce-container' style="width: 100%;height: 100%;">
    <!-- <editor id="tinymce" v-model="value" :init="init"></editor> -->
    <textarea id="tinymce" cols="30" rows="10"></textarea>
  </div>
</template>

<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/skins/ui/oxide/skin.css";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
// import { uploadImg } from "@/api/common";
//下面的插件是自带的,不需要引入
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";
export default {
  name: "MyTinymce",
  props: {
    tinymceHtml: String,
    tinymceHeight: {
      type: Number,
      default: 500
    }
  },
  components: {
    // Editor
  },
  data() {
    return {
      value: this.tinymceHtml, //父组件通过ref拿到该组件的值
      init: {
        selector: "#tinymce",
        language_url: "/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        height: 500,
        toolbar:
          "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen", //工具栏
      }
    };
  },
  watch: {
    tinymceHtml(newV,oldV) {
      this.value = newV
    }
  },
  computed: {},
  created() {},
  mounted() {
    tinymce.init({
      selector: "#tinymce",
      toolbar: 'undo redo | styleselect | bold italic | link image',
    });
  },
  methods: {}
};
</script>
<style lang="scss" scoped>
</style>